<template>
  <div class="global-header-layout">
    <van-nav-bar
      left-arrow
      :border="false"
      :style="customStyle"
      @click-left="onClickLeft"
    >
      <template #title>
        <span :style="customStyle">{{ title }}</span>
      </template>

      <template #left>
        <van-icon name="arrow-left" size="18" :style="customStyle" />
      </template>
    </van-nav-bar>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Icon } from 'vant'

Vue.use(NavBar).use(Icon)

export default {
  methods: {
    onClickLeft() {
      this.$router.back(-1)
    }
  },

  computed: {
    title() {
      return this.$route.meta.title || '海豚教育'
    },

    customStyle() {
      return this.$route?.meta?.navbar?.style
    }
  }
}
</script>
